<template>
  <div>
    <el-card class="noDone">
      <el-row type="flex">
        <el-col :span="12" class="title">执行中的项目</el-col>
      </el-row>
      <div class="table-demo-wrapper">
        <ul class="table-header">
          <li>
            <span>序号</span>
            <span>项目组</span>
            <span>项目名称</span>
            <span>版本</span>
          </li>
        </ul>
        <vueSeamlessScroll
          :data="dzxData"
          class="seamless-warp"
          :class-option="optionSetting"
        >
          <ul
            class="list"
            :style="'height:' + dzxData.length * 38 + 'px;'"
            @mousemove="stopScroll"
            @mouseout="doScroll"
          >
            <li
              :class="{ devicelistitem: true, even: (index + 1) % 2 !== 0 }"
              v-for="(item, index) in dzxData"
              :key="index"
            >
              <span :title="item.serialNum">{{ item.serialNum }}</span>
              <span :title="item.functionName">{{ item.functionName }}</span>
              <span
                :title="item.projectName"
                @click="gotoPath(item)"
                style="cursor: pointer"
                class="projectClass"
                >{{ item.projectName }}</span
              >
              <span :title="item.verNumber">{{ item.verNumber }}</span>
            </li>
          </ul>
        </vueSeamlessScroll>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getFuncTaskList } from "@/service/workbenchApi";
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  name: "noDone",
  components: { vueSeamlessScroll },
  data() {
    return {
      allowScroll: true,
      dzxData: [], //管理员看到的待分配任务
    };
  },
  methods: {
    gotoPath(item) {
      this.$router.push({
        path: "/progressManager",
        query: {
          projectId: item.projectId,
          projectName: item.projectName,
        },
      });
    },
    getData() {
      getFuncTaskList().then((res) => {
        if (res.code == 0) {
          let { dzx } = res.data;
          this.dzxData = dzx;
        }
      });
    },
    stopScroll() {
      this.allowScroll = false;
    },
    doScroll() {
      this.allowScroll = true;
    },
  },
  created() {
    this.getData();
  },
  computed: {
    optionSetting() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.table-demo-wrapper {
  margin-top: 10px;
  width: 100%;
  max-height: 230px;
  box-sizing: border-box;
  // padding: 20px 26px 0;
  overflow: hidden;
  background: #f9f9f9;
  .table-header {
    margin: 0px;
    li {
      height: 38px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 10px;
      span {
        line-height: 40px;
        flex: 2;
        font-size: 14px;
        font-family: FZZhengHeiS-M-GB;
        font-weight: 700;
        color: #909399;
        text-align: left;
        &:nth-child(1) {
          flex: 1;
        }
        &:nth-child(4) {
          flex: 1;
        }
      }
    }
  }
  .seamless-warp {
    overflow: hidden;
    .list {
      overflow: hidden;
      .devicelistitem {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 38px;
        padding-left: 10px;
        span {
          flex: 2;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #606266;
          text-align: left;
          &:nth-child(1) {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-left: 5px;
          }
          &:nth-child(4) {
            flex: 1;
          }
        }
      }
      .even {
        background: #fff;
      }
    }
  }
}
.noDone {
  width: 100%;
  // margin-top: 10px;
  // margin-bottom: 20px;
  .title {
    font-size: 18px;
    color: #303133;
    font-weight: bold;
  }
  .first {
    margin-top: 20px;
  }
}
.projectClass:hover {
  color: #00b98d !important;
}
</style>